import { useState, useRef, useEffect } from 'react'

/**
 * useRef 的高级用法
 * 场景二：打破函数组件获取数据时的限制，获取到数据的最新值
 *
 * 修改 countRef.current 的值的位置：
 * 1 useEffect 中
 * 2 事件处理程序（+1按钮）中
 *
 * 区别：触发时机不同
 *  1 useEffect 中修改：  在 App 组件重新渲染**后**执行的
 *  2 事件处理程序中修改： 在 App 组件重新渲染**前**执行的
 *
 * 注意：如果在组件重新渲染**前**执行，
 *      1 不仅可以获取到最新值
 *      2 还可以获取到上一次的值
 */
function UseRef3 () {
  console.log('2 render App')
  const [count, setCount] = useState(0)

  // 创建一个 ref 对象，默认值就是 状态 count 的值
  const countRef = useRef(count)

  // 相当于监听 count 的变化，只要 count 变了
  // 就把 count 的最新值保存到 countRef.current 属性中
  // 这样，countRef.current 中保存的就是 count 的最新值了
  // useEffect(() => {
  //   console.log('3 effect run')
  //   countRef.current = count
  //   console.log('4 change current')
  // }, [count])

  // 展示 count 值
  const showCount = () => {
    setTimeout(() => {
      console.log('展示 count 值：', count)
      console.log('展示 count 最新值：', countRef.current)
    }, 3000)
  }

  // +1
  const onClick = () => {
    console.log('1 click')
    // 最新值：count + 1，那么，count 就是上一次的值（对于下一次更新来说）
    const newCount = count + 1

    // 获取最新值
    // countRef.current = newCount

    // 获取上一次的值
    countRef.current = count

    setCount(newCount)
  }

  return (
    <div>
      <h1>计数器：{count}</h1>
      <button onClick={onClick}>+1</button>
      <button onClick={showCount}>点击按钮3秒后显示count</button>
    </div>
  )
}

export default UseRef3
